<template>
  <div class="body">
    <section class="organ-banner">
      <div class="index-bannerMain clearfix center-block">
        <div class="index-title pull-left">
          <h2>中介机构</h2>
        </div>
      </div>
    </section>
    <section class="organ_screen">
      <div class="center-block">
        <h3 class="circular-title">筛选</h3>
        <ul class="data-searchBoxSelcect">
          <li>
            <div class="screen">
              <div>机构名称</div>
              <section>
                <input type="text" name value placeholder="请输人中介机构名称" />
              </section>
            </div>
            <div class="screen">
              <div>事项名称</div>
              <section class="screen">
                <input type="text" name value placeholder="请输入中介事项名称" />
              </section>
            </div>
            <div class="screen">
              <div>资质类别</div>
              <section class="screen">
                <select name>
                  <option value>资质类别1</option>
                  <option value>资质类别2</option>
                  <option value>资质类别3</option>
                  <option value>资质类别4</option>
                </select>
              </section>
            </div>
            <div class="screen">
              <div>资质类别</div>
              <section class="screen">
                <select name>
                  <option value>请选择所在市</option>
                  <option value>所在地区2</option>
                  <option value>所在地区3</option>
                  <option value>所在地区4</option>
                </select>
              </section>
            </div>
            <a class="searchBtn" href="javascript:;">立即查询</a>
          </li>
          <li>
            <div class="screen">
              <div>服务类型</div>
              <section>
                <span
                  @click="policysTab(index)"
                  :class="{active:index==ids}"
                  v-for="(item,index) in typeList"
                  :key="index"
                >{{item}}</span>
              </section>
            </div>
          </li>
        </ul>
        <div class="MainTable">
          <p class="screenNum">
            查询结果：共
            <span>2987</span>条数据
          </p>
          <table class="table m_c_table" width="100%">
            <el-table :data="tableList" style="width: 100%">
              <el-table-column type="index" label="序号" width="100"></el-table-column>
              <el-table-column prop="articleTitle" label="企业名称"></el-table-column>
              <el-table-column prop="articleAddDate" label="统一社会信用代码"></el-table-column>
              <el-table-column prop="itemName" label="法定代表人"></el-table-column>
              <el-table-column align="center" prop="articleAuthor" label="企业注册地"></el-table-column>
            </el-table>
          </table>
          <!-- 分页区域 -->
          <div style="padding: 20px 0">
            <div class="fenYe clearfix">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="tableQuery.page"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="tableQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// 获取表格数据
import { getTableList } from "@/api/projectApproval/index.js";

export default {
  name: "agencyList",
  data: function() {
    return {
      ids: 0,
      tableList: [],
      tableQuery: {
        page: 1,
        pageSize: 2
      },
      total: 0,
      typeList: [
        "全部",
        "咨询评估类",
        "测量调查类",
        "规划设计类",
        "造价咨询类",
        "检测服务类",
        "其他服务类"
      ]
    };
  },
  methods: {
    policysTab(num) {
      this.ids = num;
    },
    // 获得表格数据
    getTableList() {
      getTableList().then(res => {
        console.log(res);
        this.tableList = res.obj.rows;
        this.total = res.obj.total;
      });
    },
    handleSizeChange(newSize) {
      this.tableQuery.page = newSize;
      this.getTableList();
      // console.log( this.tableQuery.page);
    },
    // 左边栏第几页的数据
    handleCurrentChange(newPage) {
      // this.tableQuery.pageSize=newPage
      // this.getTableList();
    }
  },
  created() {
    this.getTableList();
  }
};
</script>

<style scoped>
@import "../../../assets/css/agency.css";
.data-searchBoxSelcect > li > div{
  width: auto;
}
</style>
